<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">


                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">房间列表</div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>房间号</th>
                                <!--<th>价格</th>-->
                                <th>房间类型</th>
                                <th>房间状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Scripts  -->
<script>
    $(document).ready(function() {
        var id = ${(orderListId)!};
        var table = $('#list').DataTable({
            "ajax": '${contextPath}/orderDetailRoom/eachDetailRoom?orderListId=' + id,
            "language": {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"
            },
            "columns": [{
                "data": "id",
                "visible": false
            }, {
                "data": "roomNumber"
            }, {
                "data": "typeName"
            }, {
                "data": "statusName"
            }],
            responsive: true,
            select: true //datatables select 插件
        });

        /* 添加房间按钮 */
        $('#btn-add').click(function() {
            layer.open({ //layer弹出层
                type: 2,
                title: "添加房间",
                area: ['400px', '380px'],
                fixed: false, //不固定
                maxmin: true,
                content: '${contextPath}/room/add',
                end: function(index) {
                    table.ajax.reload();
                }
            });
        });
        /* 修改房间信息按钮 */
        $('#btn-edit').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray();
            if (rowData.length == 1) {
                var id = rowData[0].id;
                layer.open({
                    type: 2,
                    title: "修改房间信息",
                    area: ['400px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/room/edit?id=' + id,
                    end: function(index) {
                        table.ajax.reload();
                    }
                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                });
            }
        });

        /* 删除按钮 */
        $('#btn-del').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray(); //得到datatables选中行的值并转成数组
            if (rowData.length == 1) {
                layer.msg('你确定删除该房间吗?', {
                    time: 0,
                    title: "删除房间",
                    success: function(layero, index) {
                        function fn(event) {
                            if (event.keyCode === 27) {
                                layer.close(index)
                            }
                            if (event.keyCode === 13) {
                                $('.layui-layer-btn0').click();
                            }
                        }
                        $(window).one('keydown', fn);
                    },
                    area: ['300px', '150px'],
                    fixed: false, //不固定
                    btn: ['确定', '取消'],
                    yes: function(index) {
                        del(rowData[0].id);
                        layer.close(index);
                    }
                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                });
            }
        });
        /* 删除操作 */
        function del(id) {
            $.ajax({
                type: "post",
                url: "${contextPath}/room/delete",
                dataType: "json",
                data: {
                    "id": id
                },
                success: function(data) {
                    if (data.result) {
                        layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        });
                        table.ajax.reload();
                    }
                },
                error: function() {
                    layer.msg('系统出错!', {
                        time: 1000,
                        icon: 2
                    });
                }
            });
        }
        /* 房间分类按钮 */
        $('#btn-auth').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray();
            if (rowData.length == 1) {
                var id = rowData[0].id;
                layer.open({
                    type: 2,
                    title: "房间分类",
                    area: ['400px', '300px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '${contextPath}/room/view_classify?id=' + id,
                    end: function(index) {
                        table.ajax.reload();
                    }
                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                });
            }
        });


    });
</script>
</body>

</html>